<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS属性总结</title>
</head>
<body>
<table border="1px" align="center">
    <tr>
        <td colspan="5" align="center">CSS属性总结jsd2407-吕晋豪</td>
    </tr>
    <tr>
        <td>分类</td>
        <td>属性名</td>
        <td>作用</td>
        <td>属性值</td>
        <td>备注</td>
    </tr>
    <tr>
        <td rowspan="27">盒子模型</td>
        <td rowspan="2">box-sizing</td>
        <td rowspan="2">盒子模型计算方案</td>
        <td>content-box</td>
        <td>内容盒子(默认值)</td>
    </tr>
    <tr>

        <td>border-box</td>
        <td>边框盒子(怪异盒子)</td>
    </tr>
    <tr>
        <td rowspan="4">padding</td>
        <td rowspan="8">内间距</td>
        <td>10px</td>
        <td>上右下左四个方向都是10</td>
    </tr>
    <tr>
        <td>10px 20px</td>
        <td>上下：10 左右：20</td>
    </tr>
    <tr>
        <td>10px 20px 30px</td>
        <td>上：10 左右：20 下：30</td>
    </tr>
    <tr>
        <td>10px 20px 30px 40px</td>
        <td>上：10 右:20 下：30 左：40</td>
    </tr>
    <tr>
        <td>margin-top</td>
        <td>10px</td>
        <td>上外间距</td>
    </tr>
    <tr>
        <td>margin-right</td>
        <td>10px</td>
        <td>右外间距</td>
    </tr>
    <tr>
        <td>margin-bottom</td>
        <td>10px</td>
        <td>下外间距</td>
    </tr>
    <tr>
        <td>margin-left</td>
        <td>10px</td>
        <td>左外间距</td>
    </tr>
    <tr>
        <td>border</td>
        <td>四个方向的边框</td>
        <td rowspan="5">1px solid #000</td>
        <td rowspan="5">综合设置：粗细 线型 颜色</td>
    </tr>
    <tr>
        <td>border-top</td>
        <td>上边框</td>
    </tr>
    <tr>
        <td>border-right</td>
        <td>右边框</td>
    </tr>
    <tr>
        <td>border-bottom</td>
        <td>下边框</td>
    </tr>
    <tr>
        <td>border-left</td>
        <td>左边框</td>
    </tr>
    <tr>
        <td>border-width</td>
        <td>边框宽度</td>
        <td>1px</td>
        <td>设置四个方向边框的粗细</td>
    </tr>
</table>
</body>
</html>